import React, { Component } from 'react';
import { Form } from '@ant-design/compatible';

import {
  Card,
  Row,
  Col,
  Checkbox,
  Input,
  Select,
  Cascader,
} from 'antd';
import '@ant-design/compatible/assets/index.css';

const { TextArea } = Input;
const { Item } = Form;
const { Option } = Select;

interface BasicInfoProps {
  forms: any;
  detailInfo: any;
  fetchAction: (typeName: string, payload: any) => void;
  initInfo: any;
}

interface BasicInfoState {
  perCode: string;
  isEcEnabled: boolean;
  isLetterEnabled: boolean;
  perIsEcEnabled: boolean;
  perIsLetterEnabled: boolean;
}

class BasicInfoElem extends Component<BasicInfoProps, BasicInfoState> {
  timer: any = null;

  state: BasicInfoState = {
    perCode: '',
    isEcEnabled: false,
    isLetterEnabled: false,
    perIsEcEnabled: false,
    perIsLetterEnabled: false,
  };

  static getDerivedStateFromProps(nextProps: BasicInfoProps, perState: BasicInfoState) {
    const { detailInfo, fetchAction } = nextProps;
    const { perCode, perIsEcEnabled, perIsLetterEnabled } = perState;
    if (
      detailInfo
      && detailInfo.isEcEnabled
      && perIsEcEnabled !== Boolean(detailInfo.isEcEnabled)
    ) {
      return {
        isEcEnabled: Boolean(detailInfo.isEcEnabled),
        perIsEcEnabled: Boolean(detailInfo.isEcEnabled),
      };
    }
    if (
      detailInfo
      && detailInfo.isLetterEnabled
      && perIsLetterEnabled !== Boolean(detailInfo.isLetterEnabled)
    ) {
      return {
        isLetterEnabled: Boolean(detailInfo.isLetterEnabled),
        perIsLetterEnabled: Boolean(detailInfo.isLetterEnabled),
      };
    }

    if (detailInfo.pareaCode && perCode === '') {
      fetchAction('common/fetchFranchiseeList', { code: detailInfo.pareaCode });
      fetchAction('common/fetchStreetList', { code: detailInfo.dareaCode });
      return {
        perCode: detailInfo.pareaCode,
      };
    }
    return null;
  }

  handleSelectCode = (values: any) => {
    const code = values[0];
    const district = values[2];

    const { fetchAction } = this.props;
    fetchAction('common/fetchFranchiseeList', { code });
    fetchAction('common/fetchStreetList', { code: district }); // 新增获取街道信息

    const { forms: { setFieldsValue } } = this.props;
    setFieldsValue({ townCode: undefined });
  };

  handleSearchTarff = (name: string) => {
    clearTimeout(this.timer);

    this.timer = setTimeout(() => {
      const { fetchAction } = this.props;
      fetchAction('common/fetchTariffList', { name });
    }, 500);
  };

  handleChangeCheckbox = (value: number) => {
    const { isEcEnabled, isLetterEnabled } = this.state;
    if (value === 1) this.setState({ isEcEnabled: !isEcEnabled });
    if (value === 2) this.setState({ isLetterEnabled: !isLetterEnabled });
  };

  render() {
    const { isEcEnabled, isLetterEnabled } = this.state;
    const {
      forms: { getFieldDecorator },
      detailInfo,
      initInfo: {
        allOrgList,
        franchiseeList,
        streetList,
        gardenType,
        passwordType,
        allPropertyList,
        tariffList,
        addressList,
      },
    } = this.props;

    allPropertyList.map((item: any) => {
      item.omitName = item.name.length >= 12
        ? `${item.name.substring(0, 12)}...` : item.name;
      return false;
    });
    const showFcs = detailInfo.type ? 1 : 0;

    return (
      <Card title="基本信息" bordered={false}>
        <Row gutter={12}>
          <Col md={8} sm={24}>
            <Item label="场景类型" colon={false}>
              {getFieldDecorator('type', {
                initialValue: detailInfo.type,
                rules: [{ required: true, message: '请选择场景类型' }],
              })(
                <Select placeholder="请选择">
                  {gardenType.map((item: any) => (
                    <Option value={item.mCode} key={item.mCode}>
                      {item.codeName}
                    </Option>
                  ))}
                </Select>,
              )}
            </Item>
          </Col>
          <Col md={8} sm={24}>
            <Item label="　　部门" colon={false}>
              {getFieldDecorator('orgId', {
                initialValue: detailInfo.orgId,
                rules: [{ required: true, message: '请选择部门' }],
              })(
                <Select
                  showSearch
                  placeholder="请选择"
                  filterOption={(input: any, option: any) => option.props.children
                    .toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }
                >
                  {allOrgList.map((item: any) => (
                    <Option value={item.id} key={item.id}>
                      {item.name}
                    </Option>
                  ))}
                </Select>,
              )}
            </Item>
          </Col>
          <Col md={8} sm={24}>
            <Item label="收费套餐" colon={false}>
              {getFieldDecorator('tariffpkgId', {
                initialValue: detailInfo.tariffpkgId,
                rules: [{ required: true, message: '请选择收费套餐' }],
              })(
                <Select
                  showSearch
                  placeholder="请选择"
                  onSearch={this.handleSearchTarff}
                  filterOption={(input: any, option: any) => option.props.children
                    .toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }
                >
                  <Option value={0}>无</Option>
                  {tariffList.map((item: any) => (
                    <Option value={item.id} key={item.id}>
                      {item.name}
                    </Option>
                  ))}
                </Select>,
              )}
            </Item>
          </Col>
        </Row>
        <Row gutter={12}>
          <Col md={8} sm={24}>
            <Item label="　省市区" colon={false}>
              {getFieldDecorator('areaGrop', {
                initialValue: detailInfo.dareaCode && [
                  detailInfo.pareaCode,
                  detailInfo.careaCode,
                  detailInfo.dareaCode,
                ],
                rules: [{ required: true, message: '请选择省市区' }],
              })(
                <Cascader
                  options={addressList}
                  placeholder="请选择"
                  onChange={this.handleSelectCode}
                />,
              )}
            </Item>
          </Col>
          <Col md={8} sm={24}>
            <Item label="　合作商" colon={false}>
              {getFieldDecorator('franchiseLabel', {
                initialValue: detailInfo.franchiseId ? { key: detailInfo.franchiseId } : undefined,
                rules: [{ required: Boolean(!showFcs), message: '请选择合作商' }],
              })(
                <Select labelInValue placeholder="请选择" disabled={Boolean(showFcs)}>
                  {franchiseeList.length && <Option value={0}>公司直营</Option>}
                  {franchiseeList.map((item: any) => (
                    <Option value={item.id} key={item.id}>{item.name}</Option>
                  ))}
                </Select>,
              )}
            </Item>
          </Col>
          <Col md={8} sm={24}>
            <Item label="物业公司" colon={false}>
              {getFieldDecorator('propertyId', {
                initialValue: detailInfo.propertyId,
                rules: [{ required: true, message: '请选择物业公司' }],
              })(
                <Select
                  showSearch
                  placeholder="请选择"
                  maxTagTextLength={8}
                  filterOption={(input: any, option: any) => option.props.children
                    .toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }
                >
                  {allPropertyList.map((item: any) => (
                    <Option title={item.name} value={item.id} key={item.id}>{item.omitName}</Option>
                  ))}
                </Select>,
              )}
            </Item>
          </Col>
        </Row>
        <Row gutter={12}>
          <Col md={8} sm={24}>
            <Item label="街道信息" colon={false}>
              {getFieldDecorator('townCode', {
                initialValue: detailInfo.townCode,
                rules: [{ required: true, message: '请选择街道信息' }],
              })(
                <Select
                  showSearch
                  allowClear
                  placeholder="请选择"
                  filterOption={(input: any, option: any) => option.props.children
                    .toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }
                >
                  {streetList.map((item: any) => (
                    <Option value={item.code} key={item.code}>{item.name}</Option>
                  ))}
                </Select>,
              )}
            </Item>
          </Col>
          <Col md={8} sm={24}>
            <Item label="密码类型" colon={false}>
              {getFieldDecorator('openCodeType', {
                initialValue: detailInfo.openCodeType,
                rules: [{ required: true, message: '请选择密码类型' }],
              })(
                <Select placeholder="请选择">
                  <Option value={0}>无</Option>
                  {passwordType.map((item: any) => (
                    <Option value={item.value} key={item.value}>{item.label}</Option>
                  ))}
                </Select>,
              )}
            </Item>
          </Col>
          <Col md={8} sm={24}>
            <Item label="校园小区" colon={false}>
              {getFieldDecorator('name', {
                initialValue: detailInfo.name,
                rules: [{ required: true, message: '请输入校园小区' }],
              })(
                <Input allowClear placeholder="请输入" />,
              )}
            </Item>
          </Col>
        </Row>
        <Row gutter={12}>
          <Col md={8} sm={24}>
            <Item label="　　纬度" colon={false}>
              {getFieldDecorator('latitude', {
                initialValue: detailInfo.latitude,
                rules: [{ required: true, message: '请输入纬度' }],
              })(<Input
                allowClear
                type="number"
                step={0.00000000000001}
                placeholder="请输入"
              />)}
            </Item>
          </Col>
          <Col md={8} sm={24}>
            <Item label="　　经度" colon={false}>
              {getFieldDecorator('longitude', {
                initialValue: detailInfo.longitude,
                rules: [{ required: true, message: '请输入经度' }],
              })(<Input
                allowClear
                type="number"
                step={0.00000000000001}
                placeholder="请输入"
              />)}
            </Item>
          </Col>
          <Col md={8} sm={24}>
            <Item label="　负责人" colon={false}>
              {getFieldDecorator('manager', {
                initialValue: detailInfo.manager,
                rules: [{ required: true, message: '请输入负责人' }],
              })(
                <Input allowClear placeholder="请输入" />,
              )}
            </Item>
          </Col>
        </Row>
        <Row gutter={12}>
          <Col md={8} sm={24}>
            <Item label="　手机号" colon={false}>
              {getFieldDecorator('mgrPhone', {
                initialValue: detailInfo.mgrPhone,
                rules: [{ required: true, message: '请输入手机号' }],
              })(
                <Input allowClear placeholder="请输入" />,
              )}
            </Item>
          </Col>
          <Col md={8} sm={24}>
            <Item label="详细地址" colon={false}>
              {getFieldDecorator('address', {
                initialValue: detailInfo.address,
                rules: [{ required: true, message: '请输入详细地址' }],
              })(
                <TextArea placeholder="请输入" />,
              )}
            </Item>
          </Col>
          <Col md={8} sm={24}>
            <Item label="信报业务" colon={false} style={{ marginBottom: '0' }}>
              {getFieldDecorator('isLetterEnabled', {
                initialValue: detailInfo.isLetterEnabled,
              })(
                <Checkbox
                  checked={isLetterEnabled}
                  onChange={() => this.handleChangeCheckbox(2)}
                >
                  开通信报业务
                </Checkbox>,
              )}
            </Item>
            <Item label="电商业务" colon={false}>
              {getFieldDecorator('isEcEnabled', {
                initialValue: detailInfo.isEcEnabled,
              })(
                <Checkbox
                  checked={isEcEnabled}
                  onChange={() => this.handleChangeCheckbox(1)}
                >
                  开通电商业务
                </Checkbox>,
              )}
            </Item>
          </Col>
        </Row>
      </Card>
    );
  }
}

export default BasicInfoElem;
